<template>
  <div>
    <div class="menuToolBar">
      <el-button type="primary" size="small" @click="handleAdd">新增</el-button>
      <el-button type="primary" size="small" @click="handleEdit">编辑</el-button>
      <el-button type="primary" size="small" @click="handleDelete">删除</el-button>
    </div>
    <div class="menuDialog">
      <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%" center>
        <MenuForm ref="MenuForm" @callback="handleClose" :menuTree="tableData" :formData="formData"></MenuForm>
      </el-dialog>
    </div>
    <div class="menuTable">
      <el-table ref=" singleTable" :data="tableData" header-align="right" highlight-current-row style="width: 100%"
        border stripe size="small" row-key="Id" default-expand-all :tree-props="{children: 'Children'}"
        @row-click="handleSelect">
        <el-table-column property="Order" label="排序" width="120">
        </el-table-column>
        <el-table-column property="Name" label="名称" width="220">
        </el-table-column>
        <el-table-column property="Code" label="代号" width="320">
        </el-table-column>
        <el-table-column property="Icon" label="图标" width="220">
        </el-table-column>
        <el-table-column property="Url" label="路径" width="220">
        </el-table-column>
        <el-table-column property="Remark" label="备注" width="80">
        </el-table-column>
        <el-table-column property="Description" label="描述" width="120">
        </el-table-column>
        <el-table-column property="LastUpdateBy" label="更新人" width="120">
        </el-table-column>
        <el-table-column property="LastUpdateDate" label="更新时间" width="180">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import MenuForm from './MenuForm'
export default {
  components: {
    MenuForm
  },
  data() {
    return {
      dialogTitle: '新增',
      dialogVisible: false,
      tableData: [],
      selectData: {},
      formData: {
        Name: '',
        Code: '',
        Icon: '',
        Order: '',
        Description: '',
        Remark: '',
        ParentId: null,
        Url: '',
        Id: 0
      }
    }
  },
  methods: {
    initPageData() {
      this.$api.MenuApi.GetMenuTree().then(res => {
        if (res.Code === 200) {
          this.tableData = res.Result;
        };
      });
    },
    // 新增
    handleAdd() {
      this.dialogTitle = '新增菜单';
      this.dialogVisible = true;
    },
    // 编辑
    handleEdit() {
      if (Object.keys(this.selectData).length === 0) {
        this.$message({
          message: '请选择需要编辑的数据！',
          type: 'warning'
        });
        return false;
      }
      for (var key in this.selectData) {
        if (key === 'ParentId' && this.selectData[key] === 0) {
          this.formData[key] = null;
          continue;
        }
        this.formData[key] = this.selectData[key];
      }
      this.dialogTitle = '编辑菜单';
      this.dialogVisible = true;
    },
    // 删除
    handleDelete() {
      if (Object.keys(this.selectData).length === 0) {
        this.$message({
          message: '请选择需要删除的数据！',
          type: 'warning'
        });
        return false;
      }
      var para = { keyValue: this.selectData.Id };
      this.$api.MenuApi.DeleteMenuFrom(para).then(res => {
        if (res.Code === 200) {
          this.initPageData();
        };
      });
    },
    // 关闭
    handleClose(val) {
      if (val) {
        this.initPageData();
      }
      this.reSetFormData();
      this.dialogVisible = false;
    },
    // 行选中
    handleSelect(row, column, event) {
      this.selectData = row;
    },
    reSetFormData() {
      this.formData = {
        Name: '',
        Code: '',
        Icon: '',
        Order: '',
        Description: '',
        Remark: '',
        ParentId: null,
        Url: '',
        Id: 0
      }
    }
  },
  mounted() {
    this.initPageData();
  }

}


</script>
<style lang="less" scoped >
.menuToolBar {
  margin: 0 10px 10px 0;
}
</style>
